<template>
  <view class="sellPacket">
    <view v-if="sellingList.length> 0">
      <view class="sells_title">
        专享套餐购买
      </view>
      <view class="selling">
        <view class="selling_one" :class="{'active':isActive===index}" v-for="(item,index) in sellingList" :key="index"
          @click="changeActive(index,item)">
          <view class="sells_name">
            {{item.packageName}}
          </view>
          <view class="sells_price">
            {{item.packageFee}} <text>元</text>
          </view>
        </view>
      </view>

      <view class="footer_btn">
        <button type="default" @click="goBuy">立即购买</button>
      </view>
    </view>

    <view class="nodata" v-else>
      <image class="empty_img" src="/static/empty.png" mode="widthFix"></image>
      <view>没有你想要的内容</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    chargePackage
  } from '@/api/equip.js';
  import payjs from '@/pages/my/pay.js';

  // import {userInfo} from '@/api/login.js';
  export default {
    mixins: [payjs],
    data() {
      return {
        sellingList: [], //售卖套餐list
        orgId: '', //组织机构id
        isActive: 0, //选中
        currentItem: {}, //当前选中item
      }
    },
    computed: {
      ...mapState(['userinfo'])
    },
    created() {
      this.$store.dispatch("updateUserInfo");
    },
    onLoad(options) {
      this.orgId = options.orgId;
      this.getSellingPacket();
    },
    methods: {
      getSellingPacket() {
        chargePackage('/selling/list', 'get', {
          orgId: this.orgId
        }).then(res => {
          this.sellingList = res.data.records;
          this.currentItem = this.sellingList.length > 0 ? this.sellingList[0] : {};
        }).catch(err => {

        })
      },
      // 切换套餐
      changeActive(index, item) {
        this.isActive = index;
        this.currentItem = item;
      },
      goBuy() {
        this.$Toast.loading('支付发起中');
        chargePackage('/buy/charging/package', 'post', {
          "packageId": this.currentItem.packageId,
          "userId": this.userinfo.userId
        }).then(res => {
          if (res.code == 200) {
            let wechatinfo = res.data;
            if (wechatinfo) {
              this.wechatPay(wechatinfo).then(succ => {}).catch(err => {
                if (err.errMsg == 'requestPayment:ok') { //支付成功
                  this.$Toast.success('购买成功');
                  setTimeout(() => {
                    this.goback();
                  }, 1500)
                } else if (err.errMsg == 'requestPayment:fail cancel') { //用户取消
                  this.$Toast.error('取消支付');
                } else {
                  this.$Toast.error('支付失败');
                }
              });
            }
            else{
              this.$Toast.success('购买成功');
              setTimeout(() => {
                this.goback();
              }, 1500)
            }
          }
        }).catch(err => {

        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/static/css/common.scss";
  @import "@/static/css/main.scss";

  .sellPacket {
    padding: 10rpx 20rpx;

    .sells_title {
      line-height: 100rpx;
      font-size: 34rpx;
      font-weight: bold;
    }

    .selling {
      @include flexLayout(center, space-between);
      flex-wrap: wrap;

      &_one {
        box-sizing: border-box;
        width: 49%;
        height: 180rpx;
        border: 4rpx solid #DCDCDC;
        border-radius: 12rpx;
        @include flexLayout(center, center);
        flex-direction: column;
        margin-bottom: 20rpx;
        font-weight: bold;
        font-size: 30rpx;

        .sells_price {
          font-size: 46rpx;
          margin-top: 10rpx;
          color: #d4463b;

          text {
            margin-left: 10rpx;
            font-size: 30rpx;
            color: #333333;
          }
        }
      }

      &_one:nth-child(even) {
        margin-left: 2%;
      }

      .active {
        background: #579fef;
        color: #FFFFFF;
        border-color: #598fca;

        .sells_price {
          color: #FFFFFF;

          text {
            color: #FFFFFF;
          }
        }
      }
    }

    .footer_btn {
      width: 90%;
      position: fixed;
      bottom: 60rpx;
      margin: 0 5%;

      button {
        text-align: center;
        height: 43px;
        line-height: 43px;
        background: #1976d3;
        border-radius: 6px;
        background-image: linear-gradient(90deg, #1976d2, #0d80e9, #008aff, #1976d2, #1976d2);
        color: #fff;
      }
    }
  }
</style>
